<template>
	<view style="background-color: #FFFFFF;">
		<view style="margin: 0 24rpx;">
			<u-search placeholder="搜索活动课程" v-model="keyword" :clearabled="true" :showAction="false"></u-search>
		</view>
		<DaDropdownVue2 :dropdownMenu="dropdownMenuList" themeColor="#007aff" textColor="#333333" :duration="300" 
			@confirm="handleConfirm" @close="handleClose" @open="handleOpen">
			<template v-slot:slot1="{item,index}">
				<view style="padding: 40px">自定义插槽内容</view>
			</template>
		</DaDropdownVue2>
		
<view class="card" v-for="(item, index) in activityData" :key="index">
    <view class="full-label" style="width: 112rpx; height: 46rpx; background: #999999; border-radius: 20rpx 0rpx 20rpx 0rpx;color: white;text-align: center;">
        满员
    </view>
    <view class="goods-image">
        <view class="u-image">
            <image :src="item.image" mode="" style="width: 702rpx;height: 312rpx;border-radius: 20rpx 20rpx 0 0;">
            </image>
        </view>
    </view>
    <view style="padding: 32rpx 24rpx;">
        <view style="display: flex;">
            <view style="font-weight: 560;font-size: 32rpx;color: #010101;">
                {{item.name}}
            </view>
            <view style="  margin-left: auto;margin-right: 24rpx;">
                <image src="/static/images/map.png" mode="" style="width: 24rpx;height: 24rpx;margin-right: 12rpx;"></image>
                {{item.distance}}km
            </view>
        </view>
        <view class="teacherMsg" style="display: flex;align-items: center;">
            <image src="/static/images/icon_user.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
            <view class="msgRight" style="margin-left: 24rpx;">
                <view class="time">
                    <u-icon size="25" name="clock" style="margin-right: 6rpx;"></u-icon>{{item.start_time}}
                </view>
                <view class="area">
                    <u-icon size="25" name="map" style="margin-right: 6rpx;"></u-icon>{{item.address}}
                </view>
                <view class="area">
                    <u-icon size="25" name="clock" style="margin-right: 6rpx;"></u-icon>{{item.close_regist_time}}
                </view>
            </view>
        </view>

<view style="display: flex; justify-content: space-between; align-items: center;width: 654rpx;height: 64rpx;background: #FBFBFB;border-radius: 8rpx;padding: 16rpx 20rpx;">
    <view class="number">围观人数：{{item.watch_count}}人</view>
    <view class="content" v-for="(watchUserItem, watchUserIndex) in item.watchUser" :key="watchUserIndex">
            <image :src="watchUserItem.user? watchUserItem.user.avatar : ''" mode="" style="width: 32rpx;height: 32rpx;"></image>
    </view>
</view>
<view style="display: flex; justify-content: space-between; align-items: center;width: 654rpx;height: 64rpx;background: linear-gradient(to right, #e9fffa, #c0ffd1);border-radius: 8rpx;padding: 16rpx 20rpx;margin-top: 16rpx;">
	<view class="enrollment">
	    报名人数：{{item.signup_count}}/{{item.max_participants}}人
	</view>
	<view class="content" v-for="(joinUserItem, joinUserIndex) in item.joinUser" :key="joinUserIndex">
	        <image :src="joinUserItem.user? joinUserItem.user.avatar : ''" mode="" style="width: 32rpx;height: 32rpx;"></image>
	</view>
	</view>
       
        <view class="flex price-btn" style="display: flex; justify-content: space-between; align-items: center;">
            <view class="price-container">
                <text class="price-label">费用：￥</text>
                <text class="price-value">{{item.price}}</text>
                <text class="price-label">/人</text>
            </view>
            <view class="buttons-container" style="display: flex;">
                <view class="detail-btn" @click="navigate(item)">
                    详情
                </view>
                <view class="join-btn" @click="navigateRegister(item)">
                    参加
                </view>
            </view>
        </view>
    </view>
</view>
</view>

</template>
<script>
	import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue'
import {
		activityLists
	} from '@/api/store'
	export default {
		components: {
			DaDropdownVue2
		},
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {
				title: 'hello',
				keyword: '',
				activityData:'',
				dropdownMenuList: [{
						title: '筛选',
						type: 'filter',
						prop: 'god4',
						// 默认选中单选2、多选2、3、滑动30
						// value: { ft1: '2', ft2: ['2', '3'], ft3: 30 },
						options: [{
								title: '班级类型',
								type: 'checkbox',
								prop: 'ft2',
								options: [{
										label: '体验班',
										value: '1'
									},
									{
										label: '标准班',
										value: '2'
									},
									{
										label: '公益班',
										value: '3'
									},
									{
										label: '定制周期班',
										value: '4'
									}
								],
							},
							{
								title: '课程类型',
								type: 'radio',
								prop: 'ft1',
								options: [{
										label: '健身课',
										value: '1'
									},
									{
										label: '拳击课',
										value: '2'
									},
									{
										label: '公益课',
										value: '3'
									}
								],
							},
							{
								title: '时间',
								type: 'radio',
								prop: 'ft1',
								options: [{
										label: '近三天',
										value: '1'
									},
									{
										label: '一周',
										value: '2'
									},
									{
										label: '一月',
										value: '3'
									}
								],
							},
						],
					},
					{
						title: '排序方式',
						type: 'cell',
						prop: 'god3',
						// value: 'asc', // 默认升序
						options: [{
								label: '按热门程度排序1',
								value: 'filterValue1'
							},
							{
								label: '按热门程度排序2',
								value: 'filterValue2'
							},
							{
								label: '按最新上架',
								value: 'filterValue3'
							}
						]
					},
					{
						title: '搜索',
						type: 'search',
						prop: 'god0',
					},

				]
			}
		},
		methods: {
			navigateRegister(item) {
			    uni.navigateTo({
			        url: `/pages/activityconfirmation/activityconfirmation?id=${item.id}`
			    });
			},
navigate(item) {
    uni.navigateTo({
        url: `/pages/event_details/event_details?id=${item.id}`
    });
},
			getactivityLists(){
				console.log('发起请求');
				activityLists().then((res)=>{
					this.activityData=res.lists
				})
				
			},
			handleConfirm(v) {
				console.log('handleConfirm ==>', v)
			},
			handleClose(v) {
				console.log('handleClose ==>', v)
			},
			handleOpen(v) {
				console.log('handleOpen ==>', v)
			},
		},
			onLoad() {	
				this.getactivityLists()
			}
	}
</script>

<style lang="scss" scoped>
	.card {
		margin: 32rpx 24rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.ljbm {
		color: #fff;
		border-radius: 4rpx;
		border: 1px solid transparent;
	}

	.experience-class {
		width: 88rpx;
		height: 32rpx;
		background: #F36806;
		border-radius: 4rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		margin-left: 12rpx;
		margin-top: 8rpx;
	}

	.time {
		height: 24rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 24rpx;
		text-align: left;
		font-style: normal;
		margin-top: 32rpx;
	}

	.area {
		height: 24rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 24rpx;
		text-align: left;
		font-style: normal;
		margin-top: 16rpx;
		margin-bottom: 24rpx
	}

	.number {
		width: 654rpx;
		height: 64rpx;
		border-radius: 8rpx;
		text-align: left;
		line-height: 64rpx
	}

	.enrollment {
		width: 654rpx;
		height: 64rpx;
		border-radius: 8rpx;
		margin-top: 16rpx;
		text-align: left;
		line-height: 64rpx;
		color: #1e9956;
	}

	.price-btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 32rpx;
	}

	.price-container {
		flex-shrink: 1;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		
		.price-label {
			color: #999999;
			font-size: 24rpx;
		}
		
		.price-value {
			font-size: 50rpx;
			color: #EE6200;
			font-weight: bold;
		}
	}

	.buttons-container {
		display: flex;
		gap: 24rpx;
		flex-shrink: 0;
		margin-left: 24rpx;
	}

	.detail-btn, .join-btn {
		width: 160rpx;
		height: 80rpx;
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.detail-btn {
		background: #fff;
		border: 2rpx solid #E1E1E1;
	}

	.join-btn {
		background: #0DC160;
		color: #FFFFFF;
	}

	.full-label {
		position: absolute;
		width: 112rpx;
		height: 46rpx;
		background: #999999;
		border-radius: 20rpx 0rpx 20rpx 0rpx;
		color: white;
		text-align: center;
		line-height: 46rpx;
		font-size: 24rpx;
	}

	.teacherMsg {
		padding: 24rpx;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.content {
		display: flex;
		align-items: center;
		gap: 8rpx;
		
		image {
			border-radius: 50%;
		}
	}
</style>